import React, { Component } from 'react';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import {connect } from 'dva';
import { routerRedux } from 'dva/router';
import OrderEdit from '../../../components/Order/OrderEdit';
import {powerControl} from '../../../utils/powerControl';
import  styles from './OrderManage.less';
import  OrderManageTable from '../../../components/Order/index';

import {
    Row,
    Col,
    Card,
    Form,
    Input,
    Select,
    Button,
    Modal,
    message,
    Tabs,
    Checkbox,
} from 'antd';
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const AuthButton = powerControl(Button);

const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
@connect((state)=>({
    orderManage:state.orderManage,
}))
@Form.create()
class OrderManage extends  Component{
    state={
        modalVisible: false,
        formValues:{},
        editType: 'add',
        record: {},
        tabStatus:{},
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'orderManage/fetch',
        });
    }
    handleFormReset = () => {
        const {form, dispatch} = this.props;
        form.resetFields();
        this.props.dispatch({
            type: 'orderManage/fetch',
        });

    };

    // handleAddOrder = () => {
    //     this.handleModalVisible(true);
    //     this.setState({
    //         editType: 'add',
    //     });
    // }
    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    }
    // handleModalSuccess = (pagination) => {
    //     const {dispatch} = this.props;
    //     const {formValues} = this.state;
    //     const params = {
    //         currentPage: pagination.current,
    //         pageSize: pagination.pageSize,
    //         ...formValues,
    //     };
    //     dispatch({
    //         type: 'orderManage/fetch',
    //         payload: params,
    //     });
    // }


    handleSearch = (e) => {
        e.preventDefault();
        const {dispatch, form} = this.props;

        form.validateFields((err, fieldsValue) => {

            if (err) return;
            fieldsValue={
                ...fieldsValue,
                ...this.state.tabStatus
            }
            this.setState({
                formValues: fieldsValue,
            });
            dispatch({
                type: 'orderManage/fetch',
                payload: fieldsValue,
            });
        });
    }




    // handleAdd = () => {
    //     this.props.dispatch({
    //         type: 'orderManage/add',
    //         payload: {
    //             description: this.state.addInputValue,
    //         },
    //     });
    //
    //     message.success('添加成功');
    //     this.setState({
    //         modalVisible: false,
    //     });
    // }




    renderForm() {
        return this.renderSimpleForm();
    };


    renderSimpleForm() {
        const{form}=this.props;
        const {getFieldDecorator} = form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{md: 8, lg: 24, xl: 12}}>
                    <Col md={7} sm={24} >
                        <FormItem label="订单号">
                            {getFieldDecorator('order_sn')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={7} sm={24} >
                        <FormItem label="店铺名称">
                            {getFieldDecorator('shop_name')(
                                <Input placeholder="请输入"/>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={3} sm={24} >
                        <FormItem label="">
                            {getFieldDecorator('selectType')(
                             <Checkbox value="accurate">精确查询</Checkbox>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={3} sm={24} >
                        <FormItem label="">
                            {getFieldDecorator('platForm')(
                                <Checkbox value="platform">平台商店</Checkbox>
                            )}
                        </FormItem>
                    </Col>
                    <Col md={4} sm={24}>
                        <span className={styles.sumbitButtons}>
                          <AuthButton auth="orderManage.search" type="primary" htmlType="submit">查询</AuthButton >
                          <AuthButton auth="orderManage.reset" style={{marginLeft: 8}} onClick={this.handleFormReset}>重置</AuthButton >
                        </span>
                    </Col>
                </Row>
            </Form>
        );
    };

    handleTabChange = (key) => {

        const {dispatch}= this.props;
        if (key == 'allOrder') {
            this.state.tabStatus={};
            const {dispatch} = this.props;
            dispatch({
                type: 'orderManage/fetch',
            });
        }
        //未支付
        if (key == 'pay') {
            this.state.tabStatus={
                pay_status:0
            };

            const {dispatch} = this.props;
            dispatch({
                type: 'orderManage/fetch',
                payload:this.state.tabStatus,
            });
        }
        //未发货
        if (key == 'shipping') {
            this.state.tabStatus={
                shipping_status:0,
            }
            ;
            const {dispatch} = this.props;
            dispatch({
                type: 'orderManage/fetch',
                payload:this.state.tabStatus
            });
        }
        //待收货
        if (key == 'delivery') {
            this.state.tabStatus={
                shipping_status:1
            };
            const {dispatch} = this.props;

            dispatch({
                type: 'orderManage/fetch',
                payload:this.state.tabStatus,
            });
        }
        if (key == 'comp') {
            this.state.tabStatus={
                shipping_status:2
            };
            const {dispatch} = this.props;
            dispatch({
                type: 'orderManage/fetch',
                payload:this.state.tabStatus,
            });
        }
        if (key == 'close') {
          this.state.tabStatus={
            order_status:2
          };
          const {dispatch} = this.props;
          dispatch({
            type: 'orderManage/fetch',
            payload:this.state.tabStatus,
          });
        }

    }
    handleOrderListChange = (pagination) => {
        const {dispatch} = this.props;
        const {formValues} = this.state;

        const params = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...formValues,
            ...this.state.tabStatus,
        };

        dispatch({
            type: 'orderManage/fetch',
            payload: params,
        });
    }


    render(){
        const {orderManage:{data,loading:ruleLoading,orderSList}}=this.props;
        // const paginationProps = {
        //     showSizeChanger: true,
        //     showQuickJumper: true,
        //     ...data.pagination,
        // };


        return(
            <PageHeaderLayout title="订单管理">
                <Card bordered={false}>
                    <Tabs onChange={this.handleTabChange} type="card">
                        <TabPane tab={<span>全部订单</span>} key="allOrder"></TabPane>
                        <TabPane tab={<span>待付款</span>} key="pay"></TabPane>
                        <TabPane tab={<span>待发货</span>} key="shipping"></TabPane>
                        <TabPane tab={<span>待收货</span>} key="delivery"></TabPane>
                        <TabPane tab={<span>已完成</span>} key="comp"></TabPane>
                        <TabPane tab={<span>已关闭</span>} key="close"></TabPane>
                    </Tabs>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderForm()}
                        </div>
                    </div>

                    <OrderManageTable
                        data={data}
                        loading={ruleLoading}
                        // pagination={paginationProps}
                        onChange={this.handleOrderListChange}
                    />

                </Card>


                {/*<Modal*/}
                    {/*title="订单添加"*/}
                    {/*visible={this.state.modalVisible}*/}
                    {/*onOk={this.handleAdd}*/}
                    {/*onCancel={() => this.handleModalVisible()}*/}
                    {/*footer={null}*/}
                {/*>*/}
                    {/*<OrderEdit ref="OrderTypeEdit" pagination={data.pagination}*/}
                                       {/*editType={this.state.editType}*/}
                                       {/*record={this.state.record}*/}
                                       {/*orderSlist={orderSList}*/}
                                       {/*handleModalVisible={this.handleModalVisible}*/}
                                       {/*handleModalSuccess={this.handleModalSuccess}*/}
                    {/*/>*/}
                {/*</Modal>*/}



        </PageHeaderLayout>
            )
}




}

export default OrderManage;
